<template>
  <section>
    <el-row>
      <el-col :span="11">
        <div class="tree_transfer" v-loading="treeList.length == 0">
        <!-- <div style="margin-bottom:10px">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div> -->
          <el-tree
            :data="treeList"
            show-checkbox
            node-key="id"
            @check-change="nodeClick"
            :render-after-expand="false"
            ref="checkedNote"
          >
            <span slot-scope="{ node, data }">
              <i class="iconfont ali-wenjianjia1" v-if="!data.must"></i>
              <i v-else>
                <img :src="data.portrait" width="25" height="25" v-if="data.portrait">
                <i class="iconfont ali-touxiang" v-else></i>
              </i>
              <span>{{ node.label }}</span>
              <span v-show="!data.must && data.children.length > 0 && data.num != 0">({{data.num}}人)</span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="11" :offset="2">
        <div class="tree_transfer _user">
          <el-row
            v-for="user in userList"
            :key="user.id"
            style="background-color:#fff;padding: 5px 0 5px 15px"
          >
            <el-col :span="5" style="padding-top: 6px">
              <img :src="user.portrait" width="25" height="25" v-if="user.portrait">
              <i class="iconfont ali-touxiang" v-else></i>
            </el-col>
            <el-col :span="16" style="padding-top:6px">
              <span>{{user.label}}</span>
            </el-col>
            <el-col :span="3">
              <el-button
                type="text"
                @click="remove(user)"
                icon="iconfont ali-close"
                style="margin-top:-3px"
              ></el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </section>
</template>

<script>
import { dept_listAll } from "@/api/group";
import { mapGetters } from "vuex";
import { formateGroupTree } from "@/utils/formate";

export default {
  props:['treeList','userList'],
  data() {
    return {
      fullscreen: false,
      input:"",
      activeName: "first",
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  computed: {
    ...mapGetters(["menuDeptList"])
  },
  created () {
    // this.userList = []
  },
  methods: {
    openTransfer() {
      this.userList = [];
      this.treeList = [];
      this.getDeptsAndUsers();
    },
    remove(e) {
      this.userList.splice(this.userList.indexOf(e), 1);
      this.$refs.checkedNote.setChecked(e.id, false);
      setTimeout(() => {
        this.userList.pop();
      }, 10);
    },
    nodeClick(e) {
      this.$emit("getData",this.userList)
      let key = this.$refs.checkedNote.getCheckedKeys();
      if (e.must) {
        if (this.userList.indexOf(e) < 0) {
          this.userList.push(e);
        } else {
          this.userList.splice(this.userList.indexOf(e), 1);
        }
      }
    },
    async getDeptsAndUsers() {
      let { data } = await dept_listAll({
        company_id: localStorage.getItem("companyId")
      });
      let formateTree = formateGroupTree(data.data.rows);
      // this.treeList = formateTree;
    }
  }
};
</script>

<style lang="scss" scoped>
.tree_transfer{
    background-color: #F3F4F5;
    padding: 10px;
    border-radius: 5px; 
    img{
        border-radius: 50%;
    }
}
._user{
    max-height: 450px;
    overflow: scroll;
}
.ali-wenjianjia1 {
    color: #b8e8ff;
}
</style>